<template>
  <div id="data-view2">
    <dv-full-screen-container>
      <div class="head2">
        <div class="lft">
          <span class="sp1">{{ times }}</span>
          <br />
          <span class="sp2">{{ daysweek }}</span>
        </div>
        <h1>第十一事业部只能平台<strong>深圳基地</strong></h1>
        <div class="rgt">
          <span>切换基地</span>
        </div>
      </div>
      <div class="content">
        <div class="liftcontent">
          <div class="hanzhuangshangxian">
            <hanzhuangshangxian />
          </div>
          <div class="rucaikutongji">
            <rucaikutongji />
          </div>
        </div>
        <div class="middlecontent">
          <div class="jinrishengchanjihuadacheng">
            <jinrishengchanjihuadacheng />
          </div>
          <div class="zongzhuangshangxiantongji">
            <zongzhuangshangxiantongji />
          </div>
        </div>
        <div class="rightcontent">
          <div>
            <fachetongji />
          </div>
          <div class="rukutongji">
            <rukutongji />
          </div>
        </div>
      </div>
    </dv-full-screen-container>
  </div>
</template>
  
  <script>
import hanzhuangshangxian from "./shenzhen2/hanzhuangshangxian";
import rucaikutongji from "./shenzhen2/rucaikutongji";
import fachetongji from "./shenzhen2/fachetongji";
import rukutongji from "./shenzhen2/rukutongji";
import zongzhuangshangxiantongji from "./shenzhen2/zongzhuangshangxiantongji";
import jinrishengchanjihuadacheng from "./shenzhen2/jinrishengchanjihuadacheng";

import getDateTime from "../js/utils";

export default {
  components: {
    hanzhuangshangxian,
    rucaikutongji,
    fachetongji,
    rukutongji,
    zongzhuangshangxiantongji,
    jinrishengchanjihuadacheng,
  },
  name: "shenzhen2",
  data() {
    return {
      times: "",
      timeSetInt: null,
      daysweek: "",
    };
  },
  mounted() {
    // this.timeSetInt = setInterval(() => {
    //   this.$router.push("/shenzhen1");
    // }, 10000);
  },
  created() {
    setInterval(() => {
      let t = new Date();
      this.daysweek = getDateTime.timeWeekFormat(t, 0);
      this.times = getDateTime.timeWeekFormat(t, 1);
    }, 1000);
  },
  beforeDestroy() {
    clearInterval(this.timeSetInt);
  },
  methods: {},
};
</script>
  
  <!-- Add "scoped" attribute to limit CSS to this component only -->
  <style lang="less">
body {
  background-image: url("../assets/img/bg.jpg");
  // background-position: 0 0;
  // background-repeat: repeat-x;
}
.head2 {
  padding-left: 10px;
  height: 100px;
  display: flex;
  width: 100%;
  background: url("../assets/img/bg-header-middle.png") no-repeat;
  justify-content: space-between;
  background-position: center;
  //background-repeat: repeat-x;
  h1 {
    margin-top: 15px;
    text-align: center;
    font-size: 22px;
    strong {
      margin-top: 12px;
      display: block;
      text-align: center;
      font-size: 34px;
      line-height: 28px;
    }
    padding-left: 0.625rem /* 10/16 */;
  }
  .lft {
    background-image: url("../assets/img/bg-header-left.png");
    line-height: 24px;
    width: 15.75rem /* 252/16 */;
    height: 72px;
  }
  .lft span {
    padding-left: 10px;
  }
  .lft .sp1 {
    font-size: 10px;
  }
  .lft .sp2 {
    font-size: 14px;
  }
  .rgt {
    background-image: url("../assets/img/bg-header-right.png");
    line-height: 48px;
    width: 15.75rem /* 252/16 */;
    height: 72px;
  }
  .rgt span {
    font-size: 20px;
    margin-left: 138px;
  }
}
#data-view2 {
  width: 100%;
  height: 100%;
  background-color: #030409;
  color: #fff;
  #dv-full-screen-container {
    display: flex;
    // left: 4px;
    flex-direction: column;
  }
  .content {
    position: relative;
  }
  .liftcontent {
    min-width: 29%;
    height: auto;
    float: left;
    padding-left: 1.25rem /* 20/16 */;
  }
  .liftcontent .rucaikutongji {
    padding-top: 1.75rem /* 28/16 */;
  }

  .middlecontent {
    margin-left: 31%;
    margin-right: 31%;
    vertical-align: middle;
    position: relative;
    padding-left: 4px;
    padding-top: 3px;
  }
  // .middlecontent .statistical {
  //   width: 100%;
  //   min-height: 60%;
  //   position: absolute;
  // }
  .middlecontent .zongzhuangshangxiantongji {
    width: 100%;
    padding-top: 1.75rem /* 28/16 */;
    height: 21.875rem; /* 350/16 */
    position: absolute;
  }

  .rightcontent {
    min-width: 29%;
    float: right;
    margin-right: 12px /* 3/16 */;
    margin-top: -577px;
  }
  .rightcontent .rukutongji {
    padding-top: 1.75rem /* 28/16 */;
    height: 21.875rem; /* 350/16 */
  }
}
</style>
  